/*****************************************************************

                            CSS Generico

*****************************************************************/

    *{
        margin: 0;
        padding: 0;
    }

    .fullHeight{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .floatToTheRight{
        position: absolute;
        width: 49%;
        right: 0; 
    }

    h1{
        font-size: 4em;
    }

    p{
        font-size: 2em;
    }

/*****************************************************************

                           Animaciones

*****************************************************************/

    @keyframes floatUp{

        0%{
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }
        
        100%{
            transform: translateY(-800px) rotate(720deg);
            opacity: 0;
        }
    }


    .welcomeAnimation ul{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .welcomeAnimation li{
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: transparent;
        animation: floatUp 25s linear infinite;
        bottom: -150px;
    }

    .welcomeAnimation li:nth-child(1){
        left: 25%;
        animation-delay: 1s;
        animation-duration: 10s;
    }

    .welcomeAnimation li:nth-child(2){
        left: 95%;
        animation-delay: 1.5s;
        animation-duration: 9s;
    }

    .welcomeAnimation li:nth-child(3){
        left: 15%;
        animation-delay: 2s;
        animation-duration: 8s;
    }

    .welcomeAnimation li:nth-child(4){
        left: 75%;
        animation-delay: 2.5s;
        animation-duration: 7s;
    }

    .welcomeAnimation li:nth-child(5){
        left: 55%;
        animation-delay: 3s;
        animation-duration: 6s;
    }

    .welcomeAnimation li:nth-child(6){
        left: 35%;
        animation-delay: 3.5s;
        animation-duration: 5s;
    }

    .welcomeAnimation li:nth-child(7){
        left: 65%;
        animation-delay: 4s;
        animation-duration: 14s;
    }

    .welcomeAnimation li:nth-child(8){
        left: 45%;
        animation-delay: 4.5s;
        animation-duration: 8s;
    }

    .welcomeAnimation li:nth-child(9){
        left: 85%;
        animation-delay: 5s;
        animation-duration: 12s;
    }

    .welcomeAnimation li:nth-child(10){
        left: 5%;
        animation-delay: 6s;
        animation-duration: 11s;
    }

    .welcomeAnimation li:nth-child(11){
        left: 25%;
        animation-delay: 5s;
        animation-duration: 7s;
    }

    .welcomeAnimation li:nth-child(12){
        left: 65%;
        animation-delay: 7s;
        animation-duration: 11s;
    }

    .welcomeAnimation li:nth-child(13){
        left: 45%;
        animation-delay: 5s;
        animation-duration: 12s;
    }

    .welcomeAnimation li:nth-child(14){
        left: 75%;
        animation-delay: 1.5s;
        animation-duration: 8s;
    }

    .welcomeAnimation li:nth-child(15){
        left: 85%;
        animation-delay: 1s;
        animation-duration: 12s;
    }

    .welcomeAnimation li:nth-child(16){
        left: 35%;
        animation-delay: 3.5s;
        animation-duration: 3s;
    }

/*****************************************************************

                           Encabezado

*****************************************************************/

    @keyframes gradientBG{
        0%{
            background-position: 0% 50%;
        }
    
        50%{
            background-position: 100% 50%;
        }
        
        100%{
            background-position: 0% 50%;
        }
    }


    header{
        background: linear-gradient(-45deg, black, blue, blue, black);
        background-size: 600% 600%;
        animation: gradientBG 20s ease infinite;

        position: relative;
        color: white;

    }

    header section.left{
        top: 0;
        width: 100vw;
        height: 100vh;
        background: transparent;
        overflow: hidden;
    }

    header section.right{
        top: 40%;
    }

    .lg{
        width: 18vh;
    }
    .md{
        width: 12vh;
    }
    .sm{
        width: 8vh;
    }
    .xs{
        width: 4vh;
    }